<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/* 伪类选择器：   语法：任意选择器：hover【 悬停】 每个伪类选择器，具备特点
			                 所有元素具备：hover 【常见伪类选择器】
			*/
		   h1:hover{
			   background: #0055ff;
			   color: #ff00ff;
		   }
		   /* 伪类选择器:     link         链接未被点击时
			                active         链接被点击时状态
							visited        链接点击后状态
							hover         悬停链接时状态
			主要结合在一起，针对a元素效果				
							*/
		 a:link{     /* 未访问状态 */
		  color: #550000;
		  /* 去掉链接下划线 */
		  text-decoration:none;
		}	
		a:active{
			/* 被点击时状态 */
			color: #ffaaff;
			background: #0055ff;
		}
		a:visited{ 
			/* 点击后状态 */
			color: #aaff00;
			background: #005500;
		}		
		a:hover{
			/*  */
			font-size: 36px;
		}	   
		/**
		 * 伪类选择器： input ： focus  获取焦点：鼠标点击输入框时效果
		 * 
		 *针对 输入框 input 元素
		 */
		input:focus{
			background: #005500;
		}
		/* 伪类选择器 ：    ：first-child  第一个儿子元素
		                   ：last-child    最后一个儿子元素
						   ：nth-child（n） 匹配n个儿子元素
			针对：父子级关系，默认父子级关系，默认存在父子关系			   
						   */
		li:first-child{
			background: #005500;
			color: #000;
		}
		li:last-child{
			font-size: 15pt;
		}
		li:nth-child(2){
			background: #ff00ff;
			font-size: 15px;
		}
		</style>
	</head>
	<body>
		<h1>鼠标悬停效果</h1>
		<a href="#">超链接</a>
		<input type="text" />
		<!-- 元素之间存在父子级关系，默认存在父子关系 -->
		<ol>
			<li>唐山</li>
			<li>邢台</li>
			<li>承德</li>
			<li>保定</li>
		</ol>
	</body>
</html>